<script lang="ts" setup>
import {
    ArrowLeft,
    ArrowRight,
} from '@element-plus/icons-vue'
import dayjs from '#build/dayjs.imports.mjs'
import { getUrlByFileNo } from '~/api/file';
import { getxchdList } from '~/api/home'
const listOne = ref<any[]>([])
const list = ref<any[]>([])
const queryParams = reactive(
    {
        page: {
            rownumber: 7,
            pageNo: 1,
        },
        condition: [{
            colName: 'column_recommendation',
            ruleType: 'eq',
            value: '是',
        }],
        order: [{
            colName: 'release_time',
            orderType: 'desc', // asc升序 desc降序
        }],
        positions: '首页'
    },
)
function extractTextFromPTags(htmlString: string) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlString, 'text/html');
    const pTags = doc.getElementsByTagName('p');
    let text = '';
    for (let i = 0; i < pTags.length; i++) {
        text += pTags[i]?.textContent;
    }
    return text;
}
function getData() {
    getxchdList(queryParams).then((res) => {
        res.data = res.data?.map((item) => {
        return {
          title: item.key_work || item.title,
          blurd: extractTextFromPTags(item.contents) || extractTextFromPTags(item.remark),
          info: item.publisher || item.modify_user,
          time: dayjs(item.release_time || item.modify_time).format('YYYY-MM-DD'),
          url: item.cover_file_name || getUrlByFileNo(item.activity_image),
          Id: item.id,
          no: item.activity_no,
          type: item.classify_name.split('/')[1],
        }
      })
        listOne.value = res.data.slice(0, 1)
        list.value = res.data.slice(1, 7)
    }).catch(() => {
    })
}
function upper() {
    if (queryParams.page.pageNo != 1) {
        queryParams.page.pageNo--
    }
    getData()
}
function next() {
    console.log(list.value.length)
    if (list.value.length < 6) {
        return
    } else {
        queryParams.page.pageNo++
        getData()
    }

}
onMounted(() => {
    getData()
})
function toList(){
    navigateTo({
        path: `/peopleHealth/HealthActivity`,
        query: {
        },
    })
}
const router = useRouter()
function toDetail(item: any) {
  if (item.type === '问卷调查') {
    router.push({ path: `/peopleHealth/questSurvey`, query: { no: item.no } })
  }
  else {
    router.push({ path: `/peopleHealth/HealthActivityDetail/${item.Id}&${item.type}` })
  }

  // router.push({
  //   path: '/peopleHealth/detail',
  //   query: {
  //     id: item.id,
  //   },
  // })
}
</script>
<template>
    <div class="h-160  bg-#ffffff  max-w-1200px mx-auto px-10 border-2 border-solid border-#AC8358 rounded-10px m-b-10">
        <div class="flex justify-center items-end pt-30px">
            <span class="w-8px h-8px bg-#AC8358 inline-block mr-10px -mt-15px"></span>
            <span class="px-2 font-bold" text="#1D2128 22px">宣传活动</span>
            <span class="w-8px h-8px bg-#AC8358 inline-block ml-10px -mt-15px"></span>
        </div>
        <div class=" flex justify-center font-black font-serif -mt-10px" text="#031D2822 26px">
            CAMPAIGN
        </div>
        <div class="py-6  flex justify-between">
            <div class="w-25% relative cursor-pointer" border="1px solid #E5E5EA" hover="text-#AC8358" v-for="item in listOne" >
                <img class="w-100% h-200px" :src="getImgUrl(item.url)" alt="">
                <div class="h-50 p-15px" text=" 16px" >
                    <div class="flex justify-between items-end py-5px">
                        <div text="#1D2128 14px" class="font-sans font-bold pt-2" style="border-bottom:5px solid #AC8358">
                            {{ item.type}}
                        </div>
                        <div>
                            <el-button size="small" color="#AC8358" plain @click="toList">更多</el-button>
                        </div>
                    </div>
                    <div class="truncate" text="24px" @click="toDetail(item)">
                        {{ item.title }}
                    </div>
                    <div class="line-clamp-4 text-ellipsis pt-3" text="14px">
                        {{item.blurd}}
                    </div>
                </div>
            </div>
            <div class="w-72% grid grid-cols-2 gap-3 p-5" border="1px solid #E5E5EA">
                <div v-for="item in list" class=" flex h-110px cursor-pointer" hover="text-#AC8358" @click="toDetail(item)">
                    <img class="w-40%" :src="getImgUrl(item.url)" alt="">
                    <div class="bg-#fff w-60%">
                        <div class="w-100%  px-5px line-clamp-2 text-ellipsis" text="16px">
                            {{ item.title }}
                        </div>
                        <div class="pt-30px px-5px" text="#AEAEB2">{{ item.time }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex py-2  px-80 justify-between">
            <div>
            </div>
            <div>
                <el-button color="#AC8358" :icon="ArrowLeft" plain @click="upper()"></el-button>
                <el-button color="#AC8358" :icon="ArrowRight" style="color:#fff" @click="next()"></el-button>
            </div>
        </div>
    </div>
</template>